<template>
    <div class="wrap">
        <h3>请选择您将查看的企业</h3>
        <div class="h20"></div>
        <div v-for="(val,key) in companyList" :key="val.companyCode">
            <x-button type="primary" @click.native="nav(key)">{{val.companyName}}</x-button>
            <div class="h20"></div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import store from '@/store/report/index'
import { Group, Cell, XInput, XButton, Loading, XDialog, Divider } from 'vux'
import { WechatPlugin, ToastPlugin } from 'vux'
import { AlertPlugin, ConfirmPlugin } from 'vux'

import axios from '@/api/axios'
import api from '@/api/base.api'
import { Grid, GridItem } from 'vux'
import { mapState } from 'vuex'
export default {
    components: {
        Grid,
        GridItem,
        XInput,
        Group,
        XButton
    },
    mounted() {

    },
    beforeRouteEnter(to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当钩子执行前，组件实例还没被创建
        //* 没有查询绑定信息之前
        if (store.state.companyList == null) {
            api.getInfo().then(rtn => {
                console.log(rtn);
                if (rtn.code === 200 && rtn.data.flag === true) {
                    store.commit('SET_FLAG', true);
                    store.commit('UPDATE_COMPANYLIST', rtn.data.companys);
                    next("/companyList"); //类似一次性的递归
                } else {
                    next('/bind');
                }
            })
        }
        // 绑定且只有一个公司
        else if (store.state.companyList.length == 1) {
            var path = `/overView/${store.state.companyList[0].companyCode}/${store.state.companyList[0].holderCode}`;
            next(path);
        }
        //绑定且多个公司
        else {
            next();
        }

    },
    computed: {
        ...mapState({
            companyList: state => state.companyList
        })
    },
    methods: {
        nav(idx) {
            console.log(idx);
            this.$router.push(`/overView/${this.companyList[idx].companyCode}/${this.companyList[idx].holderCode}`)
        }
    }
}
</script>

<style lang="less">
h3 {
    text-align: center;
    font-size: 18px;
    margin: 100px auto 20px;
}

.body {
    height: 100%;
}
</style>